<link rel="stylesheet" href="/plug/layui/css/layui.css">
<div style="margin: 40px;" xmlns:th="http://www.thymeleaf.org">
    <div class="layui-form-item" align="center">
        <div id="manageClass"></div>
    </div>
    <div class="layui-form-item" align="center">
        <div class="layui-input-block">
            <button class="layui-btn" lay-submit lay-filter="submit">确定</button>
        </div>
    </div>
</div>
<script src="/js/jquery-3.4.1.min.js" type="text/javascript" charset="utf-8"></script>
<script src="/plug/layui/layui.all.js"></script>
<script>
    //加载layui
    layui.use(['layer', 'form', 'transfer'], function(){
        var layer = layui.layer
            ,form = layui.form
            ,transfer = layui.transfer;

        form.on('submit(submit)', function(data){
            if(transfer.getData('manageClass').length === 0) {
                return layer.msg("请至少选择一个班级！");
            }
            $.post("/teacher/manageClass", { id: [[${id}]], mc: transfer.getData('manageClass').map(v => v.value) }, function (res) {
                if(res.code === 200) {
                    var index = parent.layer.getFrameIndex(window.name);
                    parent.layer.close(index);
                    parent.location.reload();
                }
            });
            return false;
        });

        transfer.render({
            elem: '#manageClass'
            ,data: [(${cList})]
            ,value: [(${rList})]
            ,title: ['所有班级', '管理班级']
            ,showSearch: true
            ,parseData: function (res) {
                console.log(res)
                return {
                    "value": res.id,
                    "title": res.gradeName +res.name
                }
            },
            id: 'manageClass'
        })
    });
</script>